<template>
  <div class="outline gap-col-8">
    <div class="scroll">
      <div class="content text-white font-size-12 font-style-normal font-weight-400 line-height-120">
        <div class="gap-col-8 pp-list">
          <div class="font-size-14 font-weight-500 line-height-135">{{ i18n.pp?.info.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.info.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.definitions.title }}</div>
          <table class="font-size-12 font-weight-500 line-height-135">
            <tr>
              <th>{{ i18n.pp?.definitions.table.title.a }}</th>
              <th>{{ i18n.pp?.definitions.table.content.a }}</th>
            </tr>
            <tr>
              <th>{{ i18n.pp?.definitions.table.title.b }}</th>
              <th>{{ i18n.pp?.definitions.table.content.b }}</th>
            </tr>
            <tr>
              <th>{{ i18n.pp?.definitions.table.title.c }}</th>
              <th>{{ i18n.pp?.definitions.table.content.c }}</th>
            </tr>
            <tr>
              <th>{{ i18n.pp?.definitions.table.title.d }}</th>
              <th>{{ i18n.pp?.definitions.table.content.d }}</th>
            </tr>

            <tr>
              <th>{{ i18n.pp?.definitions.table.title.e }}</th>
              <th>{{ i18n.pp?.definitions.table.content.e }}</th>
            </tr>
            <tr>
              <th>{{ i18n.pp?.definitions.table.title.f }}</th>
              <th>{{ i18n.pp?.definitions.table.content.f }}</th>
            </tr>
            <tr>
              <th>{{ i18n.pp?.definitions.table.title.g }}</th>
              <th>{{ i18n.pp?.definitions.table.content.g }}</th>
            </tr>
            <tr>
              <th>{{ i18n.pp?.definitions.table.title.h }}</th>
              <th>{{ i18n.pp?.definitions.table.content.h }}</th>
            </tr>
            <tr>
              <th>{{ i18n.pp?.definitions.table.title.i }}</th>
              <th>{{ i18n.pp?.definitions.table.content.i }}</th>
            </tr>
          </table>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.termsService.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.termsService.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.modifications.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.modifications.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.collectYou.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.collectYou.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.usePersonalInfo.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.usePersonalInfo.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.changePurpose.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.changePurpose.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.disclose.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.disclose.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.usersIn.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.usersIn.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.accountDeletion.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.accountDeletion.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.thirdParty.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.thirdParty.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.retention.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.retention.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.mergerSale.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.mergerSale.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.minors.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.minors.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.track.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.track.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.contact.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.contact.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.miscellaneous.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.miscellaneous.content }}</div>
          <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.language.title }}</div>
          <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.language.content }}</div>
          <div class="font-size-12 font-weight-400 line-height-135 pt-2">{{ i18n.pp?.final }}</div>
          <div class="font-size-12 font-weight-400 line-height-135 pt-2">{{ i18n.pp?.fantasi }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useConfirmData } from '@/compositions/dialog/confirm-data'
import { useI18nPack } from '@/compositions/request/i18nPack'

const i18n = useI18nPack('pp')

useConfirmData(() => {
  return true
})
</script>
<style scoped lang="scss">
.outline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.scroll {
  //? 踩坑紀錄：mobile的touch如果被PopupDialog的preventDefault()擋住，就會導致scroll無法滾動
  max-height: 16.25rem;
  overflow-y: scroll;

  display: flex;
  padding: 0.5rem 0rem 0.5rem 0.5rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;

  border-radius: 0.625rem;
  background: var(--bg-blue, #181925);

  &::-webkit-scrollbar {
    display: flex;
    width: 1rem;
  }

  // &::-webkit-scrollbar-button {
  // }

  &::-webkit-scrollbar-track {
    box-shadow: transparent;

    // margin-top: 4.1875rem;
    // margin-bottom: 4.1875rem;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 0.09375rem;
    border: 0.35rem solid transparent;

    background: var(--color-primary-divider, rgba(215, 215, 215, 0.4));
    background-clip: content-box;
  }
}

.content {
  align-self: stretch;
}

.pp-list {
  padding-bottom: 10rem;
}
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid;
  border-color: rgb(var(--v-theme-input));
  padding: 0.5rem;
}
</style>
